<script setup lang="ts">
import { useBookStore } from '../stores/bookStore';
import ChapterList from '../components/ChapterList.vue';
import PlayerControls from '../components/PlayerControls.vue';
import VoiceSettings from '../components/VoiceSettings.vue';

const store = useBookStore();
</script>

<template>
  <div class="player-container">
    <div class="book-header">
      <h1>📖 {{ store.bookTitle }}</h1>
      <p class="subtitle">共 {{ store.chapters.length }} 个章节</p>
    </div>
    
    <div class="player-content">
      <ChapterList />
      <PlayerControls />
    </div>
    
    <div class="current-text">
      <h3>📝 当前章节内容预览</h3>
      <div class="text-content">
        {{ store.chapters[store.currentChapter] || '请选择章节开始听书' }}
      </div>
    </div>
    
    <VoiceSettings />
  </div>
</template>

<style scoped>
.player-container {
  max-width: 1200px;
  margin: 0 auto;
  animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.book-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 25px;
  box-shadow: 0 8px 32px rgba(255, 245, 157, 0.15);
  border: 1px solid rgba(255, 245, 157, 0.2);
  transition: all 0.3s ease;
}

.book-header:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(255, 245, 157, 0.2);
}

.book-header h1 {
  color: #8d6e63;
  font-size: 2rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.subtitle {
  color: #a1887f;
  font-size: 1.1rem;
}

.player-content {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}

.current-text {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 25px;
  padding: 25px;
  box-shadow: 0 8px 32px rgba(255, 245, 157, 0.15);
  border: 1px solid rgba(255, 245, 157, 0.2);
  margin-bottom: 30px;
  transition: all 0.3s ease;
}

.current-text:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(255, 245, 157, 0.2);
}

.current-text h3 {
  color: #8d6e63;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 600;
}

.text-content {
  max-height: 200px;
  overflow-y: auto;
  padding: 20px;
  background: rgba(255, 253, 231, 0.6);
  border-radius: 15px;
  line-height: 1.8;
  color: #8d6e63;
  font-size: 0.95rem;
  border: 1px solid rgba(255, 245, 157, 0.1);
}

@media (max-width: 768px) {
  .player-content {
    flex-direction: column;
  }
  
  .book-header h1 {
    font-size: 1.5rem;
  }
}
</style>
